@property --d {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --r {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes cutRotate {
  0% {
    --d: 0%;
  }
  100% {
    --d: 0%;
    --r: 90deg;
  }
  50% {
    --d: 20%;
  }
}

@mixin _Base {
  --r: 0deg;
  --d: 0%;
  mask: linear-gradient(
      var(--r),
      transparent var(--d),
      red 0 calc(100% - var(--d)),
      transparent 0
    ),
    linear-gradient(
      calc(var(--r) + 90deg),
      transparent var(--d),
      red 0 calc(100% - var(--d)),
      transparent 0
    );
  mask-composite: source-in;
  cursor: pointer;
}

@mixin cutPieces($count: 4, $duration: 0.6s) {
  @include _Base;
  mask-size: calc(100% / $count) calc(100% / $count);
  animation: cutRotate $duration infinite;
}

@mixin hoverCutPieces($count: 4, $duration: 0.6s) {
  @include _Base;
  mask-size: calc(100% / $count) calc(100% / $count);
  &:hover {
    animation: cutRotate $duration;
  }
}
